<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>在线听课</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/ystep.css">
    <link rel="stylesheet" href="css/swiper.min.css">

    <!--选择时间插件样式-->
    <link rel="stylesheet" href="css/timePicker.css">

    <!-- 仿ElementUI的日期选择插件 -->
    <!-- <link rel="stylesheet" href="css/datepicker.css"> -->

	<link href="css/foundation-datepicker.css" rel="stylesheet" type="text/css">

    <!--页面公共样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--页面样式-->
    <link rel="stylesheet" href="css/page.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->


    <!--使es6兼容ie-->
    <script src = "js/polyfill.min.js"></script>
    <!--使es6兼容ie-->

    <!--jquery等插件必须放head，后续js需要使用-->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.pagination.min.js"></script>
    <script src="js/setStep.js"></script>
    <script src="js/rollSlide.js"></script>



    <!--[if !IE]><!-->
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.js"></script>
    <!--<![endif]-->

    <!--使滑动翻滚菜单支持ie9-->
    <!--[if IE]>
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/ie9.css">
    <script src="js/idangerous.swiper.js"></script>
    <![endif]-->


    <!-- 仿ElementUI的日期选择插件 -->
    <!-- <script src="js/moment.min.js"></script> -->
    <!-- <script src="js/datepicker.all.js"></script> -->

	<!-- 兼容ie时间控件 -->
	<script src="js/foundation-datepicker.js"></script>
	<script src="js/foundation-datepicker.zh-CN.js"></script>

    <!--选择时间插件-->
    <script src="js/jquery-timepicker.js"></script>


    <script src="js/txtscroll.js"></script>

    <!--页面js必须放head里，防止页面抖动-->
    <script src="js/common.js"></script>
    <script src="js/top.js"></script>
    <script src="js/createRecord.js"></script>

</head>
<body>
<div class="fullbg">

</div>


<header>
    <!--登录后的头-->
    <div class="login-header">
        <div class="space-info ">
            <div class="addtress"><span>四川大学</span> <span>J17A101教室</span></div>
            <div class="username">张复兴</div>
        </div>
        <div class="status">
            <div class="live-status"></div>
            <div class="net-status"></div>
        </div>
        <div class="time-note">
            <div class="top-time">
                15:13
            </div>
            <!--<div class="top-note" id="s1">-->
            <!--<ul>-->

            <!--</ul>-->
            <!--</div>-->
            <div class="txt-scroll txt-scroll-curs top-note"  id="s1">
                <div class="scrollbox">
                    <div class="txt">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--未登录的头-->
    <div class="unlogin-header">
        <div class="space-info">
            <div class="username">暂未登录</div>
        </div>
        <div class="status">
            <div class="live-status">暂无直播</div>
            <div class="net-status">物联网关闭</div>
        </div>
        <div class="time-note">
            <div class="top-time">

            </div>
        </div>
    </div>
</header>

<main class="online-class-page step-page record-step-page">
    <div class="stepCont stepCont2">
        <!--流程显示-->
        <div class='ystep-container ystep-lg ystep-blue'></div>
        <!-- 分步容器-->
        <div class="pageCont">
            <div id="page1" class="stepPage">
                <!--填写信息页-->
                <section class="stepPageContent">
                    <h1 class="form-title">请详细填写您录制的课程内容</h1>
                    <div class="selectMovieWrap">
                        <section class="leftClassForm">
                            <form action="">
                                <div class="row">
                                    <span class="leftClassFormTitle">课堂ID号:</span>
                                    <!--自动获取空间号，不可自填-->
                                    <span><input class="rowInput classId" type="text" placeholder="350000" readonly></span>
                                </div>
                                <div class="row">
                                    <span class="leftClassFormTitle">课堂标题:</span>
                                    <span>
                                        <input class="rowInput titleInput"  type="text" placeholder="直观的标题更能吸引人哦" maxlength="12" onchange="this.value=this.value.substring(0,12)" onkeydown="this.value=this.value.substring(0,12)" onkeyup="this.value=this.value.substring(0,12)">
                                        <span class="t_h"><i>0</i>/12</span>
                                    </span>
                                </div>
                                <div class="row">
                                    <span class="leftClassFormTitle classInfoTitle">课堂详情:</span>
                                    <span class="classInfoContent">
                                        <textarea class="intruTextarea" name="" cols="30" rows="10" placeholder="请输入课堂详情" maxlength="200" onchange="this.value=this.value.substring(0,200)" onkeydown="this.value=this.value.substring(0,200)" onkeyup="this.value=this.value.substring(0,200)"></textarea>
                                        <span class="t_h"><i>0</i>/200</span>
                                    </span>
                                </div>

                                <!--<div class="row startTimeWrap">-->
                                    <!--<span class="leftClassFormTitle dateTitle">开始时间:</span>-->
                                    <!--&lt;!&ndash;选择日期&ndash;&gt;-->
                                    <!--<span class="chooseStarDate">-->
                                       <!--<div class="info-edit-date c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day1 mt10">-->
                                            <!--<input type="text" autocomplete="off" name="" placeholder="选择日期" readonly class="c-datepicker-data-input only-date" value="" id="chooseDate">-->
                                        <!--</div>-->
                                        <!--<div class="choose-date">-->
                                             <!--<img src="images/icon/btn_date.png" alt="">-->
                                        <!--</div>-->
                                    <!--</span>-->

                                    <!--&lt;!&ndash;选择时间&ndash;&gt;-->
                                    <!--<span class="chooseStarTime">-->
                                       <!--<div class="info-edit-date c-datepicker-date-editor c-datepicker-single-editor J-datepicker-time mt10">-->
                                            <!--<input type="text" autocomplete="off" name="" placeholder="选择时间" readonly class="c-datepicker-data-input only-date" value="" id="timePicker">-->
                                        <!--</div>-->
                                        <!--<div class="choose-date">-->
                                             <!--<img src="images/icon/btn_time.png" alt="">-->
                                        <!--</div>-->
                                    <!--</span>-->
                                <!--</div>-->

                            </form>
                        </section>

                    </div>
                </section>
            </div>
            <div id="page2" class="stepPage">
                <!--选择画面选择页-->
                <section class="stepPageContent">
                    <h1 class="form-title">选择画面</h1>
                    <div class="selectMovieWrap">
                        <section class="leftSelectMenu">
                            <div class="selectMenuBtn">
                                <ul>
                                    <li class="active" index=0><a href="javascript:void(0)" class="active">主播模式</a></li>
                                    <li index=1 ><a href="javascript:void(0)">教学模式</a></li>
                                </ul>
                            </div>


                            <!--主播模式内容区-->
                            <div class="swiper-container selectModeList broadcastMode" id="broadcastMode">
                                <div class="swiper-wrapper">
                                    <!--isSelected属性保存当前菜单是否被选中的状态，0为未选择，1为已选中，ex:默认选中主播模式1-->
                                    <div class="swiper-slide mode-item active" isSelected="1" index="0">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">主播模式1</span>
                                        </a>
                                        <!--ex:默认选中主播模式1，添加选择框-->
                                        <!--<div class="inner-border"></div>-->
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="1">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">主播模式2</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="2">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">主播模式3</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="3">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">主播模式4</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="4">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">主播模式5</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="5">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">主播模式6</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="6">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">主播模式7</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="7">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">主播模式8</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="8">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">主播模式9</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="9">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">主播模式10</span>
                                        </a>
                                    </div>


                                    <div class="swiper-slide mode-item" isSelected="0" index="10">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">主播模式11</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="11">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">主播模式12</span>
                                        </a>
                                    </div>

                                </div>


                            </div>

                            <!--教学模式内容区-->
                            <div class="swiper-container selectModeList teachMode" id="teachMode">
                                <div class="swiper-wrapper">
                                    <!--isSelected属性保存当前菜单是否被选中的状态，0为未选择，1为已选中，默认选中教学模式1-->
                                    <div class="swiper-slide mode-item active" isSelected="1" index="0">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">教学模式1</span>
                                        </a>
                                        <!--默认选中教学模式1，添加选择框-->
                                        <!--<div class="inner-border"></div>-->
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="1">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式2</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="2">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">教学模式3</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="3">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式4</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="4">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">教学模式5</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="5">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式6</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="6">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式7</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="7">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">教学模式8</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="8">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式9</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="9">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">教学模式10</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="10">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">教学模式11</span>
                                        </a>
                                    </div>
                                    <div class="swiper-slide mode-item" isSelected="0" index="11">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式12</span>
                                        </a>
                                    </div>

                                </div>


                            </div>

                        </section>

                        <section class="rightMovieWrap">
                            <div class="rightMovieTitle">
                                <span class="titleMsg">画中画1</span>
                                <div class="active-status-wrap">
                                    <!--status为当前菜单对应的子菜单的optionIndex的值,当前值为默认值-->
                                    <span class="active-status" status="0" id="changeBac">更换画面背景</span>
                                    <div class="active-item-sub-menu">
                                        <!--optionIndex为当前选项的索引值,后台可设为当前筛选条件下某个选项的id-->
                                        <span optionIndex="0">background1</span>
                                        <span optionIndex="1">background2</span>
                                        <span optionIndex="2">background3</span>
                                        <span optionIndex="3">background4</span>
                                    </div>
                                </div>
                            </div>
                            <div class="rightMovieContent">
                                <img src="images/bac/ex_img2.png" alt="">
                            </div>
                        </section>
                    </div>

                    <div class="selectLive">
                        <input type="checkbox" >
                       <span class="isRefreash">是否同步为直播</span>
                    </div>
                </section>
            </div>
        </div>
    </div>
</main>

<div class="btn-group">
    <ul>
        <li class="home">
            <a href="newindex.html"><div><img src="images/btn/btn_backindex.png" alt=""></div>首页</a>
        </li>
        <li class="scan-code">
            <a href="javascript:void(0)">  <div><img src="images/btn/btn_Sweepcode.png" alt=""></div>扫码控制</a>
            <p class="show-code"><img src="images/icon/code.png" alt=""></p>
        </li>
        <li class="switch">
            <a href="javascript:void(0)">  <div><img src="images/btn/btn_switch.png" alt=""></div>电源</a>
        </li>
    </ul>
</div>
</body>
</html>
